<template>
  <view>
    <fa-navbar title="好友助力" :border-bottom="false"></fa-navbar>
    <image
        src="/static/image/help/helpBg.png"
        class="w-screen absolute h-screen top-0 -z-50"
        mode="aspectFill"
    />
    <view class="p-4">
      <view class="text-right text-#999999">
        <text class="border-1 border-solid border-#999999 text-xs p-1 rounded" @click="goPage('/pages_sub/assistance/scoreList')">积分明细</text>
      </view>
      <view class="text-center">积分收益</view>
      <view class="text-center text-lg font-bold">¥99999</view>
      <view class="flex justify-center mt-2">
        <u-button
            size="medium"
            type="primary"
            hover-class="none"
            :custom-style="{ background: theme.bgColor, color: theme.color}"
            shape="circle"
        >
          立即参与
        </u-button>
      </view>
      <view class="topView mt-4">玩法说明</view>
      <view class="rounded-b-lg bg-f1f1f1">
        <view class="grid grid-cols-4 gap-2 p-2">
          <view v-for="(item, index) in stepList" class="text-center">
            <image class="w-60rpx h-60rpx" :src="item.img"></image>
            <view class="text-xs mt-1">Step.{{ index + 1 }}</view>
            <view class="text-xs mt-1">{{ item.label }}</view>
          </view>
        </view>
      </view>
      <view class="topView mt-4">玩法说明</view>
      <view class="rounded-b-lg bg-f1f1f1">
        <view class="grid grid-cols-2 gap-4 p-4">
          <view>
            <view class="topView">昨日收益</view>
            <view class="rounded-b-lg bg-white py-4 text-center">18</view>
          </view>
          <view>
            <view class="topView">本月收益</view>
            <view class="rounded-b-lg bg-white py-4 text-center">18</view>
          </view>
          <view>
            <view class="topView">本年收益</view>
            <view class="rounded-b-lg bg-white py-4 text-center">18</view>
          </view>
          <view>
            <view class="topView">我的好友</view>
            <view class="rounded-b-lg bg-white py-4 text-center">18</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      stepList : [
        { label: '分享平台给 新用户', img: '/static/image/help/step1.png' },
        { label: '新用户注册', img: '/static/image/help/step2.png' },
        { label: '新用户下单', img: '/static/image/help/step3.png' },
        { label: '获得分享收益', img: '/static/image/help/step4.png' },
      ]
    }
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
.topView {
  border-top-left-radius:16rpx; /* 8.0px */
  border-top-right-radius: 16rpx; /* 8.0px */
  text-align: center;
  background-color:#006AE5;
  padding: 8rpx 0;
  color: white;
}
</style>
<style lang="scss">
page {
  position: relative;
  height: 100%;
}
</style>
